<template>
  <el-dialog
    title="选择下载内容"
    :visible.sync="isshow"
    width="60%"
    @close="close()"
  >
    <div>
      <div>
        <div class="selectTitle">课程基本信息</div>
        <el-checkbox v-model="basicAll" @change="basiccheckAll()" class="checkall">全选</el-checkbox>
        <el-checkbox-group v-model="basicList">
          <el-checkbox v-for="(item) of dict.type.course_export_progress" :label="item.value" :key="item.id"
                       @change="basicitemchecked()" class="checkitem"
          >{{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </div>

    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="concleExport()">取 消</el-button>
    <el-button type="primary" @click="confirmExport()">导出</el-button>
  </span>
  </el-dialog>
</template>
<script>
export default {
  components: {},
  name: 'exportitem',
  dicts: ['course_export_progress'],
  data() {
    return {
      isshow: false,
      basicAll: false,
      basicitemList: [
        {
          name: '分院',
          id: 1
        },
        {
          name: '课程类型',
          id: 2
        },
        {
          name: '专业大类',
          id: 3
        },
        {
          name: '专业名称',
          id: 4
        },
        {
          name: '创建教师',
          id: 5
        }
      ],
      basicList: []
    }
  },
  mounted() {

  },
  watch: {},
  methods: {
    show() {
      this.isshow = true
      this.basicitemList = this.dict.type.course_export_progress
      this.basicList = this.basicitemList.map(item => item.value)
      this.basicAll = true
    },

    basiccheckAll() {
      if (this.basicAll) {
        this.basicList = this.basicitemList.map(item => item.value)
      } else {
        this.basicList = []
      }
    },
    basicitemchecked() {
      this.basicAll = this.basicList.length == this.basicitemList.length;

    },
    confirmExport() {
      let arr = this.basicList
      if (this.basicList.length == 0) {
        this.$message.error('请选择导出字段')
        return
      }

      let str = arr.join(',')
      this.$emit('confirmExport', str)
      this.isshow = false
    },
    concleExport() {

      this.basicAll = false
      this.basicList = []
      this.isshow = false
    },
    close() {
      this.basicAll = false
      this.basicList = []
      this.isshow = false
    }

  }
}
</script>
<style scoped lang="scss">
.selectTitle {
  font-size: 14px;
  font-weight: bold;
  margin: 10px 0;
  cursor: default;
}

.checkitem {
  margin: 10px 20px 10px 0;
}

.checkall {
  margin: 10px 0 10px 0;
}
</style>
